<html>
<head>
	<title>alice</title>
	<meta charset="utf-8">
	<style type="text/css">
	body{
		margin: 0 0;
    font-family: "微软雅黑","Microsoft Yahei",Arial,Helvetica,sans-serif,"宋体";
	}
	.header{
		height: 80px;
		background-color: teal;
	}
	.first{
		display: block;
		font-size: 32px;
		line-height: 80px;
		text-decoration: none;
	  color: white;
	  float: left;
	  margin-left: 30px;

	}
	.two,.one,.three,.four{
		margin-top: 15px;
		display: block;
		text-decoration: none;
	    color: white;
	    font-size: 20px;
	    padding:0 30px;
	    float: left;
	    line-height: 50px;
	}
	.one{
		margin-left: 200px;
	}
	
	a:hover{
		color: teal;
		background-color: #BDBDBD;
	}
	.first:hover {
		background-color: teal;
		color: #322727;
	}
	.five,.six{
		display: block;
		float: right;
		text-decoration: none;
	    color: white;
	    line-height: 40px;
	    margin-top: 20px;
	    padding-left: 20px;
	    padding-right: 20px;
    }
    .five{
    	margin-right: 80px;
    }
    .card{
    	
    	width: 23%;
    	border-radius: 10px;
    	background-color: #BDBDBD;
    	
    	box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
      float: left;
    }
    .main{
      height: 315px;
      width: 60%;
      margin: 20px auto;     
      background-color: white;
      border-radius: 10px;
      box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2);
    } 
    img{
    	height: 100px;
    	width: 100px;
    	border-radius: 50%;
    	display: block;
    	margin: 0 auto;
    	padding: 20px 10px;
    }
    h1{
      text-align: center;
      font-size: 30px;
      margin-bottom:60px;
      margin-top: 0;
    }
    .right,.left{
    	height: 75px;
    	width: 50%;
      text-align: center;
      line-height: 75px;
    }
    .right{
    	float: right;
    	background-color: f08080;
      border-bottom-right-radius: 10px;
    }
    .left{
    	background-color: f08080;
      border-bottom-left-radius: 10px;
    }

    .seven{
      text-decoration: none;
      font-size: 20px;
      color: black;
    }
    
    .eight{
      text-decoration: none;
      display: block;
      float: left;
      margin: 20px 50px;
      color: teal;
    }
    .main a:hover{
      color: white;
      background-color: teal; 
    }
    .right a:hover{
      color: red;           
      background-color: f08080;
    }
    .left a:hover{
      color: red;
      background-color: f08080;    
    }
	</style>
</head>
<body background="背景3.jpg">
   <!-- <div class="one"> -->
   	<!-- < class="first" src="avatar.jpg"> -->
   <!-- </div> -->
   <!-- <div class="two"> -->
   	<!-- <img class="second" src="touxiang.jpg"> -->
   <!-- </div> -->
   <!-- <div class="three"> -->
   	<!-- <img class="third" src="音乐.jpg"> -->
   <!-- </div> -->
    <div class="header">
   	
   	<a class="first" href="#">Hat's Home</a>
   	<a class="one" href="#">音乐分享</a>
    <a class="two" href="&">相册</a>
    <a class="three" href="#">博客</a>
    <a class="four" href="*">视频</a>
    <a class="five" href="*">注册</a>
    <a class="six" href="#">登陆</a>
    </div>
    <div class="main">
      <div class="card">
        <img src="touxiang.jpg">
        <h1>DmaoZ</h1>
        <div class="right">
          <a class="seven"href="&">粉丝
          </a>
        </div>
        <div class="left">
          <a class="seven" href="#">关注
          </a>
        </div>
      </div>
      <a class="eight" href="#">基本资料</a>
      <a class="eight" href="#">相册</a>
      <a class="eight" href="#">分享音乐</a>
      <a class="eight" href="#">博客</a>
    </div>
    <div class="main">
      <div class="card">
        <img src="avatar.jpg">
        <h1>XmaoZ</h1>
        <div class="right">
          <a class="seven" href="%">粉丝
        </div>
        <div class="left">
          <a class="seven" href="#">关注
          </a>
        </div>  
       
      </div>
      <a class="eight" href="#">基本资料</a>
      <a class="eight" href="#">相册</a>
      <a class="eight" href="#">分享音乐</a>
      <a class="eight" href="#">博客</a>
    </div>
    <div class="main">
      <div class="card">
        <img src="dog.jpg">
        <h1>黑小瓜</h1>
        <div class="right">
          <a class="seven" href="%">粉丝
        </div>
        <div class="left">
          <a class="seven" href="#">关注
          </a>
        </div>  
       
      </div>
      <a class="eight" href="#">基本资料</a>
      <a class="eight" href="#">相册</a>
      <a class="eight" href="#">分享音乐</a>
      <a class="eight" href="#">博客</a>
    </div>
</body>
</html>





